<template>
  <fm-making-form
    ref="makingform"
    style="height: 580px"
    preview
  >
    <template slot="action">
      <!-- 自定义操作区域插槽 -->
      <el-button type="text" icon="el-icon-upload" @click="saveForm()">保存</el-button>
    </template>
  </fm-making-form>
</template>
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
<script>
import crudActivitiForm from '@/api/workflow/activitiForm'
import CRUD, {form,crud} from '@crud/crud'
export default {
  name: 'FormDesign',
  components: {CRUD, crudActivitiForm},
  cruds() {
    return CRUD({ title: '表单管理', url: 'api/activitiForm', idField: 'id', sort: 'id,desc', crudMethod: { ...crudActivitiForm }})
  },
  // 数据字典
  data() {
    return {}
  },
  created() {
    //根据传入参数，查询到表单数据
    var id = this.$route.query.id
    crudActivitiForm.getFormDetail(id).then((res) => {
      var formJson = res.content
      if(formJson != null){
        this.$refs.makingform.setJSON(JSON.parse(formJson))
      }
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    //保存自定义表单
    saveForm(row) {
      var id = this.$route.query.id
      const json = JSON.stringify(this.$refs.makingform.getJSON())
      var data = {id: id, content: json}
      crudActivitiForm.edit(data).then((res) => {
        this.crud.notify('成功', CRUD.NOTIFICATION_TYPE.SUCCESS)})
      .catch((err) => {
         console.log(err)
      })
    }
  }
}
</script>

<style scoped>

</style>
